<!doctype html>
<html xmlns="">
<head>
  <meta charset="utf-8">
  <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width"/>
  <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  <title>支分宝</title>
  <link rel="stylesheet" type="text/css" href="/static/admin/jingtaiwu/api.css"/>
  <link rel="stylesheet" type="text/css" href="/static/admin/jingtaiwu/aui.css"/>
  <style>
    html,body{
      width: 100%;
      height: 100%;
      background-image: url(__IMG__/shareh/bg2.png);
      background-size: auto 100%;
    }
    .marquee-area {
      height: 1.75rem;
      background: #ffffff;
      overflow: hidden;
    }
    .marquee-area .swiper-container {
      height: 1.75rem;
    }
    .marquee-area .info {
      height: 1.75rem;
      text-align: center;
      line-height: 1.75rem;
      color: #A83702;
      font-size: 0.65rem;
    }

    .content-area {
      position: relative;
    }
    .bg-area{
      position: absolute;
      z-index: 99999999;
    }
    .bg-area img {
      width: 100%;
      padding-top: 140px;
      z-index: 99999999;
      /*object-fit: cover;*/
    }

    .top-area {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      padding-top: calc(100vw * 858 / 750 * (621 / 850));
    }

    .input-area {
      width: calc(100vw / 750 * 691);
      background: rgba(255, 241, 227, 1);
      border-radius: 0.5rem;
      margin: 0 auto;
      margin-top: -40px;
      position: relative;
      padding-top: 50px;
      padding-bottom: 20px;
      margin-bottom: 0.6rem;
    }

    .tip {
      position: absolute;
      width: calc(100vw * 532 / 750);
      top: 0;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .input {
      width: calc(100vw * 592 / 750);
      height: calc(100vw * 89 / 750);
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 3px 8px 1px rgba(255, 203, 167, 1);
      border-radius: 1.1rem;
      margin: 0 auto 0.9rem;
      display: flex;
      align-items: center;
      padding-left: 0.8rem;
      padding-right: 1.075rem;
    }

    .invite-code {
      width: calc(100vw * 592 / 750);
      padding-left: calc(100vw * 42 / 750);
      margin: 0 auto;
      color: #FF9000;
      font-size: 13px;
    }

    .btn-register {
      width: 80%;
      height: calc(100vw * 80 / 750);
      background: linear-gradient(90deg, rgba(255, 198, 45, 1), rgba(254, 197, 45, 1));
      box-shadow: 0 0.075rem 0.2125rem 0 rgba(135, 51, 0, 0.06), 0 0.175rem 0.375rem 0 rgba(255, 237, 166, 0.2), 0 -0.1rem 0.3rem 0 rgba(255, 42, 0, 0.56);
      border-radius: 1rem;
      margin: 0 auto;
      color: #FFF;
      font-size: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      letter-spacing: 2px;
      margin-top: 40px;
    }
    .step{
      width: calc(100vw * 691 / 750);
      margin: 0 auto;
      margin-top: 15px;
      padding: 0 0.75rem;
      color: #FFFFFF;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .step-item{
      position: relative;
      text-align: center;
      font-size: 14px;
    }
    .input .type{
      /*width: 1.15rem;*/
      height: 1.15rem;
    }
    .input .text{
      flex: 1;
      margin-left: 0.5rem;
      font-size: 0.7rem;
    }
    .input .msg{
      color: #FA402F;
      font-size: 0.7rem;
    }
  </style>
</head>
<body>
<div id="app">
  <div class="content-area">
    <div class="bg-area">
      <img src="__IMG__/shareh/bg1.png" alt="">
    </div>
    <div class="top-area">
      <div class="input-area">
        <div class="input name">
          <img src="__IMG__/shareh/up.png" alt="" class="type">
          <div class="text">
            <input type="tel" inputmode="numeric" value="{$user_phone}" disabled style="border: none;">
          </div>
        </div>
        <div class="input code">
          <img src="__IMG__/shareh/down.png" alt="" class="type">
          <div class="text">
            <input type="tel" inputmode="numeric" maxlength="6" id="pwd" placeholder="请输入验证码">
          </div>
          <div class="msg" onclick="sendcode(this);">获取验证码</div>
        </div>
        <div class="input name">
          <div class="text">
            <input type="tel" inputmode="numeric" id="mima1" maxlength="6" oninput="value=value.replace(/[^\d]/g,'')" placeholder='积分买单支付密码'>
          </div>
        </div>
        <div class="input name">
          <div class="text">
            <input type="tel" inputmode="numeric" id="mima2" maxlength="6" oninput="value=value.replace(/[^\d]/g,'')" placeholder='再次输入'>
          </div>
        </div>
        <div class="btn-register" id="fast_login">确定</div>
      </div>
    </div>
  </div>
</div>
<input type="hidden" id="phone2" value="{$user_phone2}" />
<input type="hidden" id="user_id" value="{$user_id}" />
</body>
</html>
<script type="text/javascript" src="__JS__/jquery.min.js"></script>
<script type="text/javascript">
    $('#fast_login').on('click',function (e) {
        var _phone = $('#phone2'),
            _pwd = $('#pwd'),
            p = 0,
            w = 0;
        if(_phone.val() == ""){
            alert('请输入手机号');
            return;
        }else{
            if(_phone.val().length < 11){
                alert('请输入正确的手机号');
                return;
            }else{
                p = 1;
            }
        }
        if(_pwd.val() == ""){
            alert('请输入验证码');
            return;
        }else{
            w = 1;
        }
        var user_id = $('#user_id').val();
        var mima1 = $('#mima1').val();
        var mima2 = $('#mima2').val();
        if(!mima1 || !mima2){
            alert('密码不能为空！');
            return;
        }
        if(mima1.length < 6 || mima2.length < 6){
            alert('密码必须是六位数字！');
            return;
        }
        if(mima1 != mima2){
            alert('密码不一致！');
            return;
        }
        if(p && w){
            $("#fast_login").attr('disabled','disabled').html('设置中...');
            $.ajax({
                url:"{:url('api/User/setPayPassword')}",
                type:'post',
                data:{phone:_phone.val(),code:_pwd.val(),user_id:user_id,password:mima1},
                dataType:'json',
                success:function(res){
                    if(res.status == 200){
                        setTimeout(function(){
                            history.go(-1);
                        },1500);
                    }else{
                        alert(res.msg);
                        $("#fast_login").removeAttr('disabled').html('确定');
                    }
                }
            })
        }
    })
    //发送验证码
    function sendcode(o){
        var obj= $(o);
        obj.removeAttr('onclick');
        if($('#phone2').val() == ""){
            obj.attr("onclick",'sendcode(this)');
            alert('请输入手机号');
            return;
        }else{
            if($('#phone2').val().length < 11){
                obj.attr("onclick",'sendcode(this)');
                alert('请输入正确的手机号');
                return;
            }else{
                $.ajax({
                    url:"{:url('api/Base/sendVerifyCode')}",
                    type:"post",
                    dataType:"json",
                    data:{type:1,phone:$('#phone2').val()},
                    success:function(res){
                        if(res.status == 200){
                            settime(obj);
                        }else{
                            obj.attr("onclick",'sendcode(this)');
                            alert(res.msg);
                            return;
                        }
                    }
                })

            }
        }
    }
    var countdown=60;
    function settime(obj) {
        obj.addClass('code_gray');
        if (countdown == 0) {
            obj.attr("onclick",'sendcode(this)');
            obj.html("获取验证码");
            obj.removeClass('code_gray');
            countdown = 60;
            return;
        } else {
            obj.html("重新发送(" + countdown + ")");
            countdown--;
        }
        setTimeout(function() {
            settime(obj)
        },1000)
    }
</script>